<template>
    <div class="cont">
        <div :id="id" class="video-cont" @click="toFullScreen"></div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';
import EZUIKit from 'ezuikit-js'

import { useYsStore } from '@/stores/ys';

const props = defineProps<{
    // iot: any
    appKey: string,
    appSecret: string,
    deviceCode: string,
    channelNo: string
}>()
const ysStore = useYsStore()


let random = (Math.random() + '').replace('.', '')
const id = ref('luqi' + random)
let player: EZUIKit.EZUIKitPlayer | null;

const init = async () => {

    let accessToken = await ysStore.getToken(props.appKey, props.appSecret)
    
    let node = document.querySelector('#' + id.value)

    player = new EZUIKit.EZUIKitPlayer({
        id: id.value, // 视频容器ID
        accessToken: accessToken,
        url: `ezopen://open.ys7.com/${props.deviceCode}/${props.channelNo}.hd.live`, // SN：E5927****，通道号：1，视频类型：hd
        template: 'pcLive', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
        plugin: ['fullScreen'], // 加载插件，talk-对讲
        footer: ['fullScreen'],
        width: node!.clientWidth,
        height: node!.clientHeight,
    })
    
    // setTimeout(() => {
    //     player.play();
    // }, 3000)

    // window.luqiPlayer = player

}

const toFullScreen = () => {

    player!.fullScreen()
}

onMounted(async () => {
    // deviceCode.value = 'FE7210805'
    // appKey.value = 'dbd0d82bfc674202a0498b2643679200'
    // appSecret.value = '7941cdd3a51b39699a00d63113c5f101'
    // channelNo.value = '1'
    await init()
    
})

onUnmounted(() => {
    if (player) {
        player.stop()
        player.destroy()
        player = null
    }
})
</script>
<style scoped>


.video-cont {
    width: 100%;
    height: 100%;
}

</style>